<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item> 书籍条件导出 </el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud
        ref="crud"
        v-if="option.column"
        :option="option"
        :data="data"
        v-model="form"
        :table-loading="loading"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
      >
        <!-- 自定义按钮 -->
        <template slot-scope="{}" slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-download"
            size="small"
            plain
            @click="handleExcel()"
            >导出Excel</el-button
          >
          <el-upload
            class="upload"
            :action="url"
            :on-success="uploadSuccess"
            :file-list="fileList"
            :limit="1"
          >
            <el-button type="success" size="small" plain icon="el-icon-upload2" 
              >导入Excel(用|号分隔)</el-button
            >
          </el-upload>

          <el-upload
            class="upload"
            :action="url2"
            :on-success="uploadSuccess2"
            :file-list="fileList2"
            :limit="1"
          >
            <el-button type="success" size="small" plain icon="el-icon-upload2" 
              >导入Excel(每个标签提供三列)</el-button
            >
          </el-upload>

          <el-tag type="primary">
            <b>共{{ size }}条</b>
          </el-tag>
          &nbsp;
          <el-tag type="danger">
            <b>*多个搜索条件请用#号拼接</b>
          </el-tag>
        </template>

        <template slot-scope="{}" slot="is_open_smartSearch">
          <div>
            <el-switch
              class="is_open_smartSearch"
              v-model="is_open_smartSearch"
              active-text="开启智能匹配"
              inactive-text=""
            >
            </el-switch>
            &nbsp;
            <el-tooltip placement="bottom-start">
              <div slot="content">
                智能匹配：开启或关闭<br />
                开启状态：包含书籍名称框内输入字段会进行分词处理；例如输入“豪门”，会搜索出书籍名称包含“豪”字或“门”字的书籍；<br />
                关闭状态：包含书籍名称框内输入字段不会进行分词处理；例如输入“豪门”，只会搜索出书籍名称包含“豪门”的书籍；<br />
              </div>
              <el-button
                type="text"
                icon="el-icon-question"
                circle
                class="info"
              ></el-button>
            </el-tooltip>
          </div>
        </template>
        <br />
      </avue-crud>
    </basic-container>
  </div>
</template>


<script>
import { getList, updateBook } from "@/api/cat/book";
import { catUrl } from "@/config/env";
import { common } from "@/api/cat/httpRequest";
import { search as baseURL } from "@/api/cat/baseUrls";
import { handleExcelCat } from "@/api/exportCommon";
export default {
  data() {
    return {
      loading: false,
      page: {
        total: 0,
      },
      size: 0,
      data: [],
      json: {},
      fileList:[],
      fileList2:[],
      url:`${catUrl}/${baseURL.toLead}`,
      url2:`${catUrl}/${baseURL.toLead2}`,
      is_open_smartSearch: false,
      form: {},
      param: {},
      condition: [],
      category: [],
      option: {
        title: "书籍列表",
        addBtn: false,
        editBtn: false,
        menu: false,
        viewBtn: false,
        delBtn: false,
        searchBtn: true,
        refreshBtn: true,
        // excelBtn: true,
        border: true,
        column: [
          {
            label: "书籍ID",
            prop: "book_id",
            type: "input",
          },
          {
            label: "书籍名称",
            prop: "book_title",
            type: "input",
          },
          {
            label: "包含书籍名称",
            prop: "include",
            type: "input",
            hide: true,
            placeholder: " 多个条件请用英文逗号分割",
            search: true,
          },
          {
            label: "不包含书籍名称",
            prop: "notInclude",
            type: "input",
            placeholder: " 多个条件请用英文逗号分割",
            hide: true,
            search: true,
          },
          {
            label: "阅读偏好",
            prop: "site",
            type: "select",
            search: true,
            placeholder: "阅读偏好",
            dicData: [
              {
                label: "全部",
                value: "",
              },
              {
                label: "男",
                value: 1,
              },
              {
                label: "女",
                value: 2,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
          },
          {
            label: "",
            prop: "is_open_smart",
            type: "input",
            placeholder: " 多个条件请用英文逗号分割",
            hide: true,
            searchslot: true,
            search: true,
          },
        ],
      },
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    //数据导出
    async handleExcel() {
      this.loading = true;
      //处理搜索条件
      let params = { ...this.$refs.crud.searchForm };

      //调用导出接口
      handleExcelCat(
        this.$export,
        baseURL.list,
        { ...params },
        "书籍管理",
        this.page.total,
        [...this.option.column],
        {
          handleIndexArr: [4],
          selectNameArr: ["site"],
          sourceNameArr: ["value"],
          sourceValueArr: ["label"],
        }
      );
      this.loading = false;
    },
    async getList() {
      this.loading = true;
      let param = this.params;
      this.data = [];
      param.is_open_smartSearch = this.is_open_smartSearch ? 1 : 0;
      let list = await common(baseURL.list, param, null, "POST");
      if (list) {
        this.data = list.data;
        this.size = list.data.length;
        this.loading = false;
      } else {
        this.size = 0;
      }
    },
    searchChange(params, done) {
      this.condition = [];
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      if (done) done();
    },
    uploadSuccess(res){
        this.fileList = []
        if(res.code==1){
            this.$message.success(res.message)
        }else{
            this.$message.error(res.message)
        }
    },
    uploadSuccess2(res){
        this.fileList2 = []
        if(res.code==1){
            this.$message.success(res.message)
        }else{
            this.$message.error(res.message)
        }
    },
    refreshChange() {
      this.getList();
    },
  },
};
</script>

<style>
.info .el-icon-question {
  font-size: 18px;
}
</style>